<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            margin-bottom: 20px;
        }
        .box6 {
            width: 200px;
            height: 80px;
            background-color: #abc6cf;
            text-align: center;
            line-height: 73px;
            font-size: 30px;
            font-weight: bold;
        }
        .a1 {
            color: white;
            text-decoration: none;
        }
        .box4 {
            width: 1000px;
            height: 50px;
            margin-bottom: 10px;
        }
        .box1 {
            border: 2px solid black;
            padding-left: 20px;
            text-align: left;
            line-height: 50px;
        }
        .box2 {
            border-bottom: 2px solid red;
            padding-left: 20px;
            text-align: left;
            line-height: 50px;
        }
        .box3 {
            border: 2px solid #ccc;
            border-top-left-radius: 15px;
            border-bottom-left-radius: 15px;
            border-top-right-radius: 15px;
            border-bottom-right-radius: 15px;
            padding-left: 20px;
            text-align: left;
            line-height: 50px;
        }
        .box4 {
            border-left: 6px solid #2196F3;
            background-color: #ddffff;
            padding-left: 20px;
            text-align: left;
            line-height: 50px;
        }
        ul {
            list-style: none;
        }
        li {
            border-bottom: 1px solid #ccc;
            margin-bottom: 20px;
        }
        .a2 {
            text-decoration: none;
            color: #37a;
        }
        span {
            margin-right: 15px;
        }
        .li1 {
            width: 800px;
            height: 30px;
        }
    </style>
</head>
<body>
    <div>
        <div class="box6">
            <a href="#" class="a1">悬疑频道</a>
         </div>
         <div class="box1">在四边都有边框</div>
         <div class="box2">红色底部边框</div>
         <div class="box3">圆角边框</div>
         <div class="box4">左侧边框带宽度，颜色为蓝色</div>
         <div class="box5">
             <ul>
                 <li class="li1"><span>1</span><a href="#" class="a2">周处除三害</a></li>
                 <li class="li1"><span>2</span><a href="#" class="a2">琳达想吃鸡肉!</a></li>
                 <li class="li1"><span>3</span><a href="#" class="a2">美国小说</a></li>
                 <li class="li1"><span>4</span><a href="#" class="a2">利益区域</a></li>
             </ul>
         </div>
    </div>
    
</body>
</html>